<template>
  <div class="mod-home">
    <el-card v-for="x in data" :key="x.title" :style="{'width': x.width||'100%'}">
      <div slot="header" class="title-style">
        <span>{{x.title}}</span>
        <div>
          <el-date-picker
            v-if="x.year"
            v-model="x.yearData"
            type="year"
            align="right"
            style="width:91px"
            placeholder="选择年"
            value-format="yyyy"
          ></el-date-picker>
          <el-select v-if="x.select" v-model="x.selectData" filterable placeholder="请选择" style="width:100px">
            <el-option
              v-for="item in x.select"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div v-if="x.noEcharts">
        <div v-if="x.name === 'news'" class="news-box">
          <div class="news-title">
            <p>
              发表篇数
              <span>{{x.publish}}</span>
            </p>
            <p>
              阅读次数
              <span>{{x.read}}</span>
            </p>
          </div>
          <el-table class="news-table" :data="x.tableData">
            <el-table-column
              header-align="center"
              show-overflow-tooltip
              prop="newsTitle"
              label="新闻标题"
            />
            <el-table-column align="center" prop="readNumber" label="阅读次数" />
          </el-table>
        </div>
        <div v-if="x.name === 'grade'">
          <el-table border :data="x.tableData" max-height="200">
            <el-table-column align="center" show-overflow-tooltip type="index" label="排名"></el-table-column>
            <el-table-column align="center" prop="grade" label="部门" />
            <el-table-column align="center" prop="fraction" label="分数" />
          </el-table>
        </div>
      </div>
      <div v-else :ref="`myChart_${x.name}`" style="width: 100%; height: 200px"></div>
    </el-card>
  </div>
</template>

<script>
import 'echarts'
import * as echarts from 'echarts/echarts.all'
import drawer from './drawer'

export default {
  data() {
    return {
      data: [
        {
          width: '35%',
          name: 'login',
          title: '员工登录统计',
          value: {
            series: [
              {
                type: 'gauge',
                radius: '100%',
                startAngle: 200, // 开始角度
                endAngle: -20, // 结束角度
                pointer: false,
                data: [{ value: 50 }]
              }
            ]
          }
        },
        {
          width: '30%',
          name: 'violate',
          title: '三违人数统计',
          year: true,
          yearData: `${new Date().getFullYear()}`,
          value: {
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                data: [
                  { value: 235, name: '视频广告' },
                  { value: 274, name: '联盟广告' },
                  { value: 310, name: '邮件营销' },
                  { value: 335, name: '直接访问' },
                  { value: 400, name: '搜索引擎' }
                ]
              }
            ]
          }
        },
        {
          width: '35%',
          name: 'credentials',
          title: '证件统计',
          year: true,
          yearData: `${new Date().getFullYear()}`,
          value: {
            series: [
              {
                type: 'treemap',
                roam: false,
                nodeClick: false,
                silent: true,
                breadcrumb: false,
                width: '100%',
                height: '100%',
                data: [
                  {
                    name: 'nodeA',
                    value: 10,
                    children: [
                      {
                        name: 'nodeAa',
                        value: 4
                      }
                    ]
                  },
                  {
                    name: 'nodeB',
                    value: 20,
                    children: [
                      {
                        name: 'nodeBa',
                        value: 20,
                        children: [
                          {
                            name: 'nodeBa1',
                            value: 20
                          }
                        ]
                      }
                    ]
                  },
                  {
                    name: 'nodeB',
                    value: 20,
                    children: [
                      {
                        name: 'nodeBa',
                        value: 20,
                        children: [
                          {
                            name: 'nodeBa1',
                            value: 20
                          }
                        ]
                      }
                    ]
                  },
                  {
                    name: 'nodeB',
                    value: 20,
                    children: [
                      {
                        name: 'nodeBa',
                        value: 20,
                        children: [
                          {
                            name: 'nodeBa1',
                            value: 20
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        },
        {
          width: '80%',
          name: 'news',
          noEcharts: true,
          title: '新闻统计',
          publish: 105,
          read: 65,
          tableData: [
            {
              newsTitle: '萨达模拟我诶 v 弄碎的薄 i',
              readNumber: 105
            }
          ]
        },
        {
          name: 'OnlineTraining',
          title: '线上培训统计',
          year: true,
          yearData: `${new Date().getFullYear()}`,
          value: {
            legend: {
              right: '3%',
              data: ['培训人数', '及格人数']
            },
            grid: {
              left: '50px',
              bottom: '20px',
              width: '94%',
              height: '85%'
            },
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '培训人数',
                type: 'line',
                // symbol: 'none',
                color: ['#66AEDE'],
                data: [800, 300, 500, 800, 300, 600, 500, 600]
              },
              {
                name: '及格人数',
                type: 'line',
                // symbol: 'none',
                color: ['#90EC7D'],
                data: [600, 300, 400, 200, 300, 300, 200, 400]
              }
            ]
          }
        },
        {
          name: 'OfflineTraining',
          title: '线下培训统计',
          year: true,
          yearData: `${new Date().getFullYear()}`,
          value: {
            legend: {
              right: '3%',
              data: ['学习次数', '完成', '未完成']
            },
            grid: {
              left: '50px',
              bottom: '20px',
              width: '94%',
              height: '85%'
            },
            xAxis: {
              data: [
                '机械电气',
                '掘进采煤',
                '矿井建设',
                '一通三防',
                '运输提升',
                '综合知识'
              ]
            },
            yAxis: {},
            series: [
              {
                name: '学习次数',
                type: 'bar',
                data: [50, 200, 360, 100, 100, 200],
                label: {
                  normal: {
                    show: true,
                    position: 'top'
                  }
                }
              },
              {
                name: '完成',
                type: 'bar',
                data: [50, 200, 360, 100, 100, 200],
                label: {
                  normal: {
                    show: true,
                    position: 'top'
                  }
                }
              },
              {
                name: '未完成',
                type: 'bar',
                data: [50, 200, 360, 100, 100, 200],
                label: {
                  normal: {
                    show: true,
                    position: 'top'
                  }
                }
              }
            ]
          }
        },
        {
          width: '20%',
          name: 'exam',
          year: true,
          yearData: `${new Date().getFullYear()}`,
          select: [
            {
              label: '上课没打',
              value: '上课没打'
            },
            {
              label: '萨达达',
              value: '萨达达'
            },
            {
              label: '萨的晚饭吃的',
              value: '萨的晚饭吃的'
            },
            {
              label: '深入骨髓趺',
              value: '深入骨髓趺'
            }
          ],
          selectData: '',
          title: '考试统计分析',
          value: {
            legend: {
              right: '3%',
              data: ['培训人数', '及格人数']
            },
            grid: {
              left: '50px',
              bottom: '20px',
              width: '94%',
              height: '85%'
            },
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '培训人数',
                type: 'line',
                smooth: 0.5,
                symbolSize: 7,
                lineStyle: {
                  color: ['#66AEDE'],
                  span: 4
                },
                data: [800, 300, 500, 800, 300, 600, 500, 600]
              },
              {
                name: '及格人数',
                type: 'line',
                smooth: 0.5,
                symbolSize: 7,
                lineStyle: {
                  color: ['#90EC7D'],
                  span: 4
                },
                data: [600, 300, 400, 200, 300, 300, 200, 400]
              }
            ]
          }
        },
        {
          name: 'grade',
          noEcharts: true,
          width: '20%',
          title: '部门成绩排行榜',
          tableData: [
            {
              grade: '骊山/通风科',
              fraction: 100
            },
            {
              grade: '骊山/通风科',
              fraction: 100
            },
            {
              grade: '骊山/通风科',
              fraction: 100
            },
            {
              grade: '骊山/通风科',
              fraction: 100
            },
            {
              grade: '骊山/通风科',
              fraction: 100
            },
            {
              grade: '骊山/通风科',
              fraction: 100
            },
            {
              grade: '骊山/通风科',
              fraction: 100
            }
          ]
        },
        {
          name: 'DailyQuestion',
          title: '每日一题统计',
          year: true,
          yearData: `${new Date().getFullYear()}`,
          select: [
            {
              label: '上课没打',
              value: '上课没打'
            },
            {
              label: '萨达达',
              value: '萨达达'
            },
            {
              label: '萨的晚饭吃的',
              value: '萨的晚饭吃的'
            },
            {
              label: '深入骨髓趺',
              value: '深入骨髓趺'
            }
          ],
          selectData: '',
          value: {
            legend: {
              right: '3%',
              data: ['答题人数', '答题次数']
            },
            grid: {
              left: '50px',
              bottom: '20px',
              width: '94%',
              height: '85%'
            },
            xAxis: {
              data: [
                '机械电气',
                '掘进采煤',
                '矿井建设',
                '一通三防',
                '运输提升',
                '综合知识'
              ]
            },
            yAxis: {},
            series: [
              {
                name: '答题人数',
                type: 'bar',
                barMaxWidth: '25px',
                data: [50, 200, 360, 100, 100, 200],
                label: {
                  normal: {
                    show: true,
                    position: 'top'
                  }
                }
              },
              {
                name: '答题次数',
                type: 'line',
                data: [50, 200, 360, 100, 100, 200]
              }
            ]
          }
        }
      ]
    }
  },
  mounted() {
    this.data.forEach(x => {
      if (!x.noEcharts) {
        echarts.init(this.$refs[`myChart_${x.name}`][0]).setOption(x.value)
      }
    })
  },
  methods: {
    resetEcharts() {
      /*
        * this.data.forEach(x => {
          if (!x.noEcharts) {
            this.$refs[`myChart_${x.name}`][0].resize()
          }
        })
        * */
    }
  },
  components: { drawer },
  watch: {
    '$store.state.common.sidebarFold': function() {
      this.resetEcharts()
    }
  }
}
</script>

<style lang="scss" scoped>
.mod-home {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

.title-style {
  padding-left: 20px;
  position: relative;
  font-weight: bold;
  color: #1a1a1a;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-style:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 3px;
  height: 20px;
  background: #1a1a1a;
}

.news-box {
  height: 185px;

  .news-title {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-weight: bold;

    span {
      font-weight: 400;
    }
  }

  .news-table {
    padding: 0 10px;

    &.el-table {
      background: #f9f9f9;

      th {
        font-weight: bold;
        color: #333333;
      }

      th,
      tr {
        background: #f9f9f9;
      }
    }
  }
}
</style>
